<template>
  <div>
    <el-row>
      <el-col :span="20" :offset="2">
        <div class="head">
          <el-steps :active="activePage" simple>
            <el-step title="请选择老师" icon="el-icon-edit" @click="activePage" />
            <el-step title="请选择班级" icon="el-icon-upload" @click="activePage" />
            <el-step title="完成" icon="el-icon-picture" />
          </el-steps>
        </div>
      </el-col>
    </el-row>
    <el-row v-show="isShow1" :is-show1="isShow1">
      <el-col :span="20" :offset="2">
        <div class="main">
          <el-table :data="teacherList">
            <el-table-column label="老师ID" prop="userId" align="center" />
            <el-table-column label="老师名称" prop="nickName" align="center" />
            <el-table-column label="所属部门" prop="dept.deptName" align="center" />
            <el-table-column label="老师电话" prop="phonenumber" align="center" />
            <el-table-column
              label="操作"
              align="center"
              width="160"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="chooseTeacher(scope.row)"
                >选择老师</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getRole"
          />
        </div>
      </el-col>
    </el-row>
    <el-row v-show="isShow2" :is-show="isShow2">
      <el-col :span="20" :offset="2">
        <div class="main">
          <el-table :data="teacherClassList">
            <el-table-column label="班级编码" prop="deptId" align="center" />
            <el-table-column label="班级名称" prop="deptName" align="center" />
            <el-table-column label="老师名称" prop="nickName" align="center" />
            <el-table-column
              label="操作"
              align="center"
              width="160"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="chooseClass(scope.row)"
                >选择班级</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getRole"
          />
        </div>
      </el-col>
    </el-row>
    <el-row v-show="isShow3" :is-show3="isShow3">
      <el-col :span="20" :offset="2">
        <h1 v-if="isNewStudent" :isNewStudent="isNewStudent">你已经完成基本的导师班级选择！</h1>
        <h1 v-if="!isNewStudent" :isNewStudent="isNewStudent">你已经完成过导师和班级的选择，请勿重复选择</h1>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { selectAllTeacher, selectClassByTeacherId } from '@/api/system/user'
import { addStudentTeacherClass, listStudentTeacherClass } from '@/api/zua/studentTeacherClass'
import { getUserProfile } from '@/api/system/user'
export default {
  data() {
    return {
      // 返回后端的值
      data: {
        studentid: null,
        teacherid: null,
        classid: null
      },
      isNewStudent: true,
      // 显示第几个页面
      isShow1: true,
      isShow2: false,
      isShow3: false,
      // 活动的页面
      activePage: 1,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined
      },
      // 老师列表
      teacherList: [],
      // 老师下面的班级列表
      teacherClassList: [],
      // 选择过得学生列表
      oldStudent: []

    }
  },
  async created() {
    // this.loginUserIntroducion = getters.introducion
    await this.getOldStudent()
    this.getRole()
    await this.getUser()
    this.oldStudent.map((i) => {
      if (this.data.studentid === i.studentid) {
        this.activePage = 3
        this.isNewStudent = false
        this.isShow1 = false
        this.isShow2 = false
        this.isShow3 = true
      }
    })
  },
  methods: {
    async getOldStudent() {
      const res = await listStudentTeacherClass()
      this.oldStudent = res.rows
    },
    async getUser() {
      const res = await getUserProfile()
      this.data.studentid = res.data.userId
    },
    /**
     * 根据老师查询
     */
    getTeacherClass(teacherId) {
      selectClassByTeacherId(teacherId).then(res => {
        this.total = res.total
        this.teacherClassList = res.rows
      })
    },
    /**
     * 查询老师列表
     */
    getRole() {
      this.loading = true
      selectAllTeacher(101).then(response => {
        this.teacherList = response.rows
        this.total = response.total
      })
    },
    /**
     * 选择老师
     */
    chooseTeacher(row) {
      // row.deptId老师id
      this.data.teacherid = row.userId
      selectClassByTeacherId(row.userId).then(res => {
        this.total = res.total
        this.teacherClassList = res.rows
      })
      this.$alert('你只能选择一次，请谨慎选择', '确定选这个老师吗？', {
        confirmButtonText: '确定',
        callback: action => {
          this.activePage = 2
          this.isShow1 = false
          this.isShow2 = true
          this.$message({
            type: 'success',
            message: `选择老师成功！`
          })
        }
      })
    },
    /**
     * 选择班级
     */
    chooseClass(row) {
      this.data.classid = row.deptId
      this.$alert('你只能选择一次，请谨慎选择', '确定选这个班级吗？', {
        confirmButtonText: '确定',
        callback: action => {
          addStudentTeacherClass(this.data)
          this.activePage = 3
          this.isShow2 = false
          this.isShow3 = true
        }
      })
    }
  }
}
</script>
<style scoped>
h1{
  text-align: center;
}
.head{
    margin-top: 25px;
    margin-bottom: 20px;
    /* border: 1px solid red; */
}

</style>
